﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Chapter.aspx.cs" Inherits="MiaoWeiProject.liuyong.Chapter" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title><%=Request["name"] %></title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
            font-size: 14px;
        }

        body {
            font-family: tahoma,arial,'Hiragino Sans GB','微软雅黑',sans-serif;
            color: #6f7b91;
            font-size: 14px;
            position: relative;
            min-width: 1200px;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: #666;
            outline: 0;
        }
        /*头部样式*/
        #heard {
            width: 100%;
            height: 70px;
            background: url('/images/nav-bg.png') repeat-x left top;
            display: flex;
        }

        #heard_conet {
            height: 50px;
            margin: 10px auto;
            width: 75%;
            display: flex;
            justify-content: space-between;
        }

        #conter_left {
            width: 275px;
            height: 50px;
            background: url('/images/nav-logo-2019-0826.png') no-repeat left center;
        }

        #conter_zhong {
            width: 60%;
            height: 50px;
        }

            #conter_zhong ul {
                display: flex;
                justify-content: space-between;
                overflow: hidden;
            }

                #conter_zhong ul li {
                    text-align: center;
                    height: 50px;
                    line-height: 50px;
                }

                    #conter_zhong ul li a {
                        padding: 7px 27px;
                        color: #666;
                        font-size: 1.2em;
                        border-radius: 18px;
                    }

                    #conter_zhong ul li i.nav-new {
                        display: inline-block;
                        width: 39px;
                        height: 20px;
                        background: url('/images/nav-new.png') no-repeat left top;
                        vertical-align: middle;
                        margin-left: 4px;
                    }
        /*悬浮导航样式*/
        /*#conter_zhong ul li a:*/ .hover {
            color: #f70;
            background-color: #e0dce4;
            box-shadow: 2px 2px 1px #c5c0cc inset;
        }

        #conter_right {
            width: 8%;
            height: 50px;
        }

            #conter_right ul {
                height: 50px;
                line-height: 50px;
                display: flex;
                justify-content: space-between;
                overflow: hidden;
            }

                #conter_right ul li {
                    text-align: center;
                }

                    #conter_right ul li a {
                        font-size: 1.1em;
                        color: #666;
                    }

                        #conter_right ul li a:hover {
                            color: #f70;
                        }
        /*点击导航样式*/
        .yangshi {
            color: #fff;
            background-color: #e75c77;
            box-shadow: 2px 2px 1px #c42f4c inset;
        }
        /*大图*/
        #datu {
            height: 220px;
            width: 100%;
            background: url("lyimages/Chapter/bannerBg-repeat.png") repeat-x;
        }

        .banner {
            height: 220px;
            min-width: 1200px;
            background: url("lyimages/Chapter/bannerBg.png") no-repeat center center;
        }

            .banner .main {
                position: relative;
            }

        .main {
            width: 1200px;
            margin: 0 auto;
        }

        .banner .hotlink {
            height: 41px;
            line-height: 41px;
            font-size: 14px;
            color: #fff;
            padding-top: 24px;
            margin-bottom: 26px;
        }

            .banner .hotlink a {
                color: #fff;
            }

        .banner .name-box {
            width: 100%;
            height: 40px;
            margin-bottom: 24px;
        }

        .banner .class-name {
            float: left;
            padding: 5px 0;
            font-size: 30px;
            line-height: 30px;
            font-weight: normal;
            color: #fff;
        }

        .banner .search {
            width: 360px;
            height: 40px;
            position: relative;
            float: right;
        }
        /*内容*/
        .content-box {
            width: 100%;
            min-height: 550px;
            background-color: #f3f5f7;
        }

        .content {
            width: 1200px;
            margin: 0 auto;
        }
        /*内容左边*/
        .content-left {
            float: left;
            width: 850px;
            padding-top: 30px;
            margin-bottom: 50px;
        }

        .info-list {
            margin-bottom: 34px;
        }

        .clear::after {
            clear: both;
        }

        .clear::after, .clear::before {
            content: "";
            display: table;
        }

        .info-title li {
            width: 118px;
            height: 40px;
            border: 1px solid #eaeeee;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            color: #707a87;
            background: #f7f9f9;
            margin-right: -1px;
            float: left;
            cursor: pointer;
            position: relative;
        }

            .info-title li i {
                width: 120px;
                height: 2px;
                background-color: #e15671;
                position: absolute;
                left: -1px;
                top: -1px;
                display: none;
            }

        em, i, dfn {
            font-style: normal;
        }

        .info-title li.active {
            background-color: #fff;
            border-bottom: 0;
            height: 41px;
            color: #e15671;
            border-top: 2px solid #e15671;
        }

        .info-text {
            border: 1px solid #eaeeee;
            margin-top: -1px;
            padding: 18px;
            line-height: 26px;
            background-color: #fff;
        }

            .info-text li {
                display: none;
            }

                .info-text li.active {
                    display: block;
                }

        .btn-box {
            margin-bottom: 34px;
            text-align: center;
            font-size: 0;
        }

        .group-two-box {
            float: right;
        }

        .open-group-two {
            font-size: 14px;
            height: 50px;
            width: 410px;
            background: url("lyimages/Chapter/red-btn.png");
            padding: 1px 2px 3px;
            border-radius: 25px;
            overflow: hidden;
            cursor: pointer;
            line-height: 50px;
            text-align: center;
            color: #fff;
            text-shadow: 1px 2px #e35873;
        }

            .open-group-two:hover {
                background: url("lyimages/Chapter/red-btn-hover.png");
            }

            .open-group-two .open-free {
                float: left;
                width: 201px;
                text-align: center;
                color: #fff;
                height: 50px;
                line-height: 50px;
                text-indent: 40px;
            }

                .open-group-two .open-free em {
                    font-size: 18px;
                    vertical-align: top;
                }

                .open-group-two .open-free span {
                    font-size: 20px;
                    vertical-align: top;
                }

            .open-group-two .two-people {
                float: right;
                height: 50px;
                width: 205px;
                line-height: 50px;
                color: #fff;
                opacity: .7;
                text-indent: -10px;
            }

        .vip-buy {
            margin: 10px 0 0;
            height: 20px;
            line-height: 20px;
            color: #e15671;
            text-align: center;
            font-size: 14px;
        }

            .vip-buy .vip-icon {
                vertical-align: middle;
                display: inline-block;
                width: 24px;
                height: 20px;
                background: url("lyimages/Chapter/vip-icon.png");
                margin-right: 10px;
            }

        .btn-box .ps {
            margin-top: 5px;
            padding-left: 34px;
            font-size: 14px;
            text-align: center;
            color: #bbb;
        }

        .direct-box {
            float: left;
        }

        .direct-buy {
            font-size: 14px;
            height: 50px;
            width: 410px;
            background: url("lyimages/Chapter/direct-buy.png");
            padding: 1px 2px 3px;
            border-radius: 25px;
            overflow: hidden;
            cursor: pointer;
            line-height: 50px;
            text-align: center;
            color: #fff;
            text-shadow: 1px 2px #eda02a;
        }

            .direct-buy:hover {
                background: url("lyimages/Chapter/direct-buy-hover.png");
            }

            .direct-buy em {
                font-size: 18px;
                vertical-align: top;
            }

            .direct-buy span {
                font-size: 20px;
                vertical-align: top;
            }

        .left-title {
            height: 16px;
            line-height: 16px;
            margin-bottom: 15px;
            font-size: 16px;
            font-weight: normal;
            color: #444d59;
        }
        /*二级菜单*/
        .chapter-name {
            height: 42px;
            line-height: 42px;
            border: 1px solid #eaeeee;
            padding-left: 6px;
            margin-top: -1px;
            margin-bottom: -1px;
            background: #fff url("lyimages/Chapter/sub.png") no-repeat 97% center;
            position: relative;
            cursor: pointer;
        }

            .chapter-name.active {
                background-color: #e15671;
                border-color: #e15671;
                color: #fff;
                background-image: url("lyimages/Chapter/plus.png");
            }

                .chapter-name.active .sj {
                    display: block;
                }

            .chapter-name .sj {
                width: 0;
                height: 0;
                zoom: 1;
                overflow: hidden;
                border-width: 4px;
                border-style: solid dashed dashed dashed;
                border-color: #e15671 transparent transparent transparent;
                position: absolute;
                left: 0;
                bottom: -8px;
                display: none;
            }

            .chapter-name span {
                font-size: 16px;
                padding: 0 15px;
            }

        .video-list {
            border-left: 1px solid #eaeeee;
            border-right: 1px solid #eaeeee;
            display: none;
        }

            .video-list.active {
                display: block;
            }

            .video-list li {
                height: 34px;
                border-top: 1px solid #fff;
                border-bottom: 1px solid #fff;
                background-color: #fff;
                position: relative;
            }

                .video-list li:hover {
                    background-color: #eaeeee;
                }

                .video-list li a {
                    width: 100%;
                    height: 100%;
                    display: block;
                }

            .video-list .video-list-line {
                position: absolute;
                top: -1px;
                left: 18px;
                width: 13px;
                height: 36px;
                background: url("lyimages/Chapter/video-list-line.png");
            }

            .video-list .video-name {
                float: left;
                padding-left: 42px;
                height: 34px;
                line-height: 34px;
                color: #949fab;
                position: relative;
            }

        /*内容右边*/
        .content-right {
            float: right;
            width: 310px;
            padding-top: 26px;
        }

        .material-title {
            height: 44px;
            line-height: 44px;
            font-size: 16px;
            font-weight: normal;
            color: #444d59;
        }

        .material-box {
            background-color: #fff;
            border: 1px solid #eaeeee;
            padding: 23px 20px 20px;
            padding-top: 23px;
            margin-bottom: 32px;
        }

            .material-box.book {
                padding-top: 84px;
                background: #fff url("lyimages/Chapter/book.png") no-repeat center 23px;
            }

            .material-box .text {
                margin-bottom: 10px;
                text-align: center;
                color: #949fab;
            }

        .recommend-title {
            height: 16px;
            line-height: 16px;
            font-size: 16px;
            font-weight: normal;
            margin-bottom: 15px;
            color: #444d59;
        }

        .recommend-list {
            margin-bottom: 53px;
        }

            .recommend-list li {
                padding: 19px 20px;
                width: 268px;
                height: 100px;
                border: 1px solid #eaeeee;
                margin-bottom: -1px;
                background-color: #fff;
                position: relative;
            }

                .recommend-list li a {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }

                .recommend-list li img {
                    float: left;
                    width: 100px;
                    height: 100px;
                }

                .recommend-list li .info-box {
                    float: left;
                    margin-left: 14px;
                    width: 154px;
                }

                    .recommend-list li .info-box p {
                        height: 48px;
                        overflow: hidden;
                        line-height: 24px;
                    }

                    .recommend-list li .info-box .money {
                        height: 26px;
                        line-height: 26px;
                        font-size: 16px;
                        color: #e15671;
                        margin-bottom: 2px;
                    }
        /*尾部样式*/
        #weibu {
            height: 144px;
            width: 100%;
            display: flex;
            background: url("/images/footer-bg.jpg") repeat-x left top;
        }

        #weibu_zhong {
            width: 75%;
            height: 80px;
            margin: 30px auto;
            justify-content: space-between;
            display: flex;
        }

        #weibu_left {
            height: 100%;
            width: 25%;
            border-right: 2px solid #b7b3c1;
        }

        #weibu_right {
            height: 100%;
            width: 65%;
        }

        #weibu_right_top {
            height: 50%;
            width: 100%;
        }

        #weibu_right_down {
            height: 50%;
            width: 100%;
        }

        #weibu_right_top ul {
            display: flex;
            justify-content: space-between;
            overflow: hidden;
        }

            #weibu_right_top ul li {
                height: 35px;
                line-height: 35px;
            }

                #weibu_right_top ul li a {
                    color: #666;
                    font-size: 1.1em;
                }

                    #weibu_right_top ul li a:hover {
                        color: #f70;
                    }

                #weibu_right_top ul li.link-line {
                    color: #666;
                    padding: 0 16px;
                }

        #weibu_right_down p {
            font-size: 1.2em;
            color: #6f7b91;
            height: 35px;
            line-height: 35px;
        }
    </style>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        //头部的
        function Heard() {
            $(".li").hover(function () {
                $(this).addClass("hover");
                $(this).css({ "color": " #f70" });
                //$(this).parent().siblings().children().removeClass("hover");
            }, function () {
                $(this).removeClass("hover");
                $(this).css({ "color": "#666" });
                //$(this).parent().siblings().children().removeClass("hover");
            }
            );
            $(".li").click(function () {
                $(this).addClass("yangshi");
                $(this).css({ "color": "white" });
                $(this).parent().siblings().children().removeClass("yangshi");
            });
        }
        $(function () {
            //头部
            Heard();
            //进入页面时尊享视频选中
            $(".li").eq(3).addClass("yangshi");
            $(".li").eq(3).css({ "color": "white" });
            $(".li").eq(3).parent().siblings().children().removeClass("yangshi");

            //课程单击事件
            $(".info-list>ul.info-title li").each(function (i) {
                $(this).click(function () {
                    $(this).addClass("active");
                    $(this).siblings().removeClass("active");
                    $(".info-list>ul.info-text li").eq(i).addClass("active");
                    $(".info-list>ul.info-text li").eq(i).siblings().removeClass("active");
                });
            });
            //二级菜单
            $(".chapter-name").click(function () {
                $(this).toggleClass('active').next().find("ul.video-list").toggleClass('active');
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <%--  头部--%>
        <div id="heard">
            <div id="heard_conet">
                <div id="conter_left"></div>
                <div id="conter_zhong">
                    <ul>
                        <li><a href="#" class="li">首页</a></li>
                        <li><a href="#" class="li">课程</a></li>
                        <li><a href="#" class="li">视频学习</a></li>
                        <li><a href="#" class="li">尊享视频<i class="nav-new"></i></a></li>
                        <li><a href="#" class="li">社区</a></li>
                    </ul>
                </div>
                <div id="conter_right">
                    <ul>
                        <li><a href="#">登录</a></li>
                        <li>|</li>
                        <li><a href="#">注册</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <%--大图--%>
        <div id="datu">
            <div class="banner">
                <div class="main">
                    <div class="hotlink">
                        <a href="http://www.miaov.com">首页</a>
                        &gt;
			
                        <a href="EnjoyVideo.aspx">尊享视频</a>
                        &gt;
			
                        <a href="javascript:;"><%=Request["name"] %></a>
                    </div>
                    <div class="name-box">
                        <h3 class="class-name"><%=Request["name"] %></h3>
                    </div>
                </div>
            </div>
        </div>
        <%--内容--%>
        <div class="content-box">
            <div class="content clear">
                <%--内容左边--%>
                <div class="content-left">
                    <div class="info-list">
                        <ul class="info-title clear">
                            <li class="active"><i></i>课程介绍</li>
                            <li><i></i>学习目标</li>
                            <li><i></i>课程详情</li>
                        </ul>
                        <ul class="info-text">
                            <li class="active">本课程适用于有一定前端基础和 vue.js 的基础，想成为顶尖的 vueJS开发者</li>
                            <li>1.能够写出Vue组件见通信方式的 7 种姿势<br />
                                2.能够设计和开发自己的组件库，并且有自动化单元测试<br />
                                3.能够讲清楚 vue/vuex/vue-router代码和原理<br />
                                4.能够使用Nuxt.js开发同构应用<br />
                                5. 能够使用Typescript开发Vue<br />
                                6.能够使用docker部署 vue.js 应用</li>
                            <li>sdsfddddddddddddddddddddddddd</li>
                        </ul>
                    </div>
                    <div class="btn-box clear">
                        <div class="group-two-box">
                            <a href="/login">
                                <div class="open-group-two" data-group="">
                                    <div class="open-free">
                                        <em>一键开团：</em><span>￥328</span>
                                        <p class="money">￥328</p>
                                    </div>
                                    <div class="two-people">开2人团，成团团长返6微币</div>
                                </div>
                                <div class="vip-buy"><i class="vip-icon"></i>VIP会员拼团￥308</div>
                                <p class="ps">拼团购买，需成团后才可以观看</p>
                            </a>
                        </div>
                        <div class="direct-box">
                            <a href="/login">
                                <div class="direct-buy" data-group="">
                                    <em>单独购买：</em><span>￥488</span>
                                </div>
                                <div class="vip-buy"><i class="vip-icon"></i>VIP会员单独购买立减100</div>
                                <p class="ps">单独购买，成功后可直接观看</p>
                            </a>
                        </div>
                    </div>
                    <h3 class="left-title">课程目录</h3>
                    <div>
                        <asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
                            <ItemTemplate>
                                <div class="chapter-name active">
                                    <i class="sj"></i><span>
                                        <%=c %>
                                    </span><a name="655"></a><%# Eval("Smallzhangjie") %>
                                </div>
                                <div>
                                    <ul class="video-list active">
                                        <asp:Repeater ID="Repeater2" runat="server">
                                            <ItemTemplate>
                                                <li><a href="Video.aspx?id=<%# Eval("ZhangjieID") %>"><i class="video-list-line"></i>
                                                    <div class="video-name"><%# Eval("Smallzhangjie") %></div>
                                                </a></li>
                                            </ItemTemplate>
                                        </asp:Repeater>
                                    </ul>
                                </div>
                                <%c++; %>
                            </ItemTemplate>
                        </asp:Repeater>
                    </div>
                </div>
                <%--内容右边--%>
                <div class="content-right">
                    <h3 class="material-title">资料下载</h3>
                    <div class="material-box book">
                        <p class="text">购买课程后，可免费下载课件</p>
                    </div>
                    <h3 class="recommend-title">相关课程</h3>
                    <ul class="recommend-list">
                        <li>
                            <a href="/study/remote/chapter/290"></a>
                            <img src="lyimages/33030611613286_240x120crop.png" />
                            <div class="info-box">
                                <p>vue 进阶</p>
                                <div class="money">￥158.00</div>
                            </div>
                        </li>
                        <li>
                            <a href="/study/remote/chapter/349"></a>
                            <img src="lyimages/33030611613286_240x120crop.png" />
                            <div class="info-box">
                                <p>Vue 仿锤子商城实战</p>
                                <div class="money">￥139.00</div>
                            </div>
                        </li>
                        <li>
                            <a href="/study/remote/chapter/533"></a>
                            <img src="lyimages/33030611613286_240x120crop.png" />
                            <div class="info-box">
                                <p>Vue 系统修炼与精彩实战</p>
                                <div class="money">￥1,888.00</div>
                            </div>
                        </li>
                        <li>
                            <a href="/study/remote/chapter/565"></a>
                            <img src="lyimages/33030611613286_240x120crop.png" />
                            <div class="info-box">
                                <p>Vuex 状态管理和路由配置</p>
                                <div class="money">￥488.00</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <%--  尾部内容--%>
        <div id="weibu">
            <div id="weibu_zhong">
                <div id="weibu_left">
                    <img src="../images/weibumiaowei.jpg" />
                </div>
                <div id="weibu_right">
                    <div id="weibu_right_top">
                        <ul>
                            <li><a href="#">首页</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">课程</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">视频学习</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">尊享视频</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">社区</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">关于我们</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">常见问题</a></li>

                        </ul>
                    </div>
                    <div id="weibu_right_down">
                        <p>京ICP备08102442号-1 2007-2019 MIAOV.COM 版权所有</p>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>
